<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			  content="width=device-width, initial-scale=1.0">
		<title>龙华系统研发中心官网</title>
		<style>
			body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.9), rgba(37, 117, 252, 0.9));
            color: white;
            min-height: 100vh; /* 确保页面至少占满视口高度 */
            display: flex; /* 使用 flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
        .container, .welcome-container {
            background: white; /* 背景为白色 */
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 300px;
            max-width: 90%; /* 最大宽度为 90% */
            color: black; /* 设置文本颜色为黑色，以便于阅读 */
        }
        h1, h2 { margin-bottom: 20px; }
        h1 { font-size: 24px; }
        h2 { font-size: 20px; }
        input, button {
            padding: 12px; width: 100%;
            border-radius: 5px; font-size: 16px;
            margin-top: 10px;
            box-sizing: border-box; /* 确保 padding 和 border 被计算在内 */
        }
        input {
            border: 1px solid #ddd;
        }
        input:focus { border-color: #007bff; outline: none; }
        button { 
            background-color: #007bff; color: white; border: none; cursor: pointer; 
        }
        button:hover { background-color: #0056b3; }
        .hidden { display: none; }
        .loader { 
            margin: 20px auto; 
            border: 4px solid #f3f3f3; 
            border-top: 4px solid #007bff; 
            border-radius: 50%; 
            width: 30px; height: 30px; 
            animation: spin 1s linear infinite; 
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .nav { 
            display: flex; justify-content: center; flex-wrap: wrap; margin-top: 20px; 
        }
        .nav button { padding: 10px 15px; margin: 5px; }
        .page { display: none; }
        .page.active { display: block; }
    </style>
	</head>
	<body>
		<div id="loginPage"
			 class="container">
			<h1>登录系统</h1>
			<input type="text"
				   id="username"
				   placeholder="用户名">
			<div class="password-container">
				<input type="password"
					   id="password"
					   placeholder="密码">
				<span class="toggle-password"
					  id="togglePassword"
					  style="cursor: pointer; color: #007bff;">显示</span>
			</div>
			<button id="loginBtn">登录</button>
			<div class="message"
				 id="message"></div>
			<div class="loader hidden"
				 id="loader"></div>
		</div>

		<div id="welcomePage"
			 class="welcome-container hidden">
			<h1>欢迎，<span id="welcomeUsername"></span>！</h1>
			<div class="nav">
				<button class="nav-btn"
						data-target="homePage">首页</button>
				<button class="nav-btn"
						data-target="aboutPage">关于我们</button>
				<button class="nav-btn"
						data-target="mailPage">邮件</button>
				<button class="nav-btn"
						data-target="profilePage">个人中心</button>
				<button class="nav-btn"
						data-target="productPage">产品发布</button>
				<button class="nav-btn"
						data-target="newsPage">新闻中心</button>
				<button class="nav-btn"
						data-target="settingsPage">设置</button>
			</div>
			<div class="content">
				<div id="homePage"
					 class="page active">
					<h2>首页</h2>
					<p>欢迎来到龙华系统研发中心！</p>
				</div>
				<div id="aboutPage"
					 class="page">
					<h2>关于我们</h2>
					<p>我们专注于技术创新与客户满意度。</p>
				</div>
				<div id="mailPage"
					 class="page">
					<h2>邮件</h2>
					<ul>
						<li>邮件1：欢迎加入我们的团队！</li>
					</ul>
				</div>
				<div id="profilePage"
					 class="page">
					<h2>个人中心</h2>
					<p>用户名：<span id="profileUsername"></span>
					</p>
					<p>邮箱：<span id="profileEmail"></span>
					</p>
				</div>
				<div id="productPage"
					 class="page">
					<h2>产品发布</h2>
					<ul>
						<li>产品1：LCS_GCM</li>
					</ul>
				</div>
				<div id="newsPage"
					 class="page">
					<h2>新闻中心</h2>
					<ul>
						<li>新闻1：公司荣获创新奖</li>
					</ul>
				</div>
				<div id="settingsPage"
					 class="page">
					<h2>设置</h2>
					<button class="settings-btn"
							data-target="changePasswordPage">修改密码</button>
					<button class="settings-btn"
							data-target="notificationSettingsPage">通知设置</button>
					<button class="settings-btn"
							data-target="privacySettingsPage">隐私设置</button>
					<div id="changePasswordPage"
						 class="page hidden">
						<h3>修改密码</h3>
						<input type="password"
							   id="newPassword"
							   placeholder="新密码">
						<button id="submitNewPasswordBtn">提交</button>
					</div>
					<div id="notificationSettingsPage"
						 class="page hidden">
						<h3>通知设置</h3>
						<p>选择你想接收的通知类型：</p>
						<button id="saveNotificationSettingsBtn">保存设置</button>
					</div>
					<div id="privacySettingsPage"
						 class="page hidden">
						<h3>隐私设置</h3>
						<label>
							<input type="checkbox"
								   checked> 允许他人查看我的资料</label>
						<button id="savePrivacySettingsBtn">保存设置</button>
					</div>
				</div>
			</div>
			<button id="logoutBtn">退出登录</button>
		</div>

		<script>
			const validCredentials = {
			            "钟可怡": { password: "123456", email: "3410114@LCS.com" },
			            "冯浩哲": { password: "123456", email: "3410784314@qq.com" }
			        };
			
			        const elements = {
			            loginPage: document.getElementById('loginPage'),
			            welcomePage: document.getElementById('welcomePage'),
			            usernameInput: document.getElementById('username'),
			            passwordInput: document.getElementById('password'),
			            messageBox: document.getElementById('message'),
			            loader: document.getElementById('loader'),
			            welcomeUsername: document.getElementById('welcomeUsername'),
			            profileUsername: document.getElementById('profileUsername'),
			            profileEmail: document.getElementById('profileEmail'),
			            pages: document.querySelectorAll('.page')
			        };
			
			        if (localStorage.getItem('isLoggedIn') === 'true') {
			            loginPage.classList.add('hidden');
			            welcomePage.classList.remove('hidden');
			            const username = localStorage.getItem('username');
			            updateWelcomeInfo(username);
			        }
			
			        document.getElementById('togglePassword').addEventListener('click', () => {
			            const { passwordInput } = elements;
			            passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
			            document.getElementById('togglePassword').textContent = passwordInput.type === 'password' ? '显示' : '隐藏';
			        });
			
			        document.getElementById('loginBtn').addEventListener('click', handleLogin);
			        document.getElementById('logoutBtn').addEventListener('click', handleLogout);
			        document.querySelectorAll('.nav-btn').forEach(btn => btn.addEventListener('click', handlePageChange));
			        document.querySelectorAll('.settings-btn').forEach(btn => btn.addEventListener('click', handleSettingsChange));
			        document.getElementById('submitNewPasswordBtn').addEventListener('click', handleNewPassword);
			        document.getElementById('saveNotificationSettingsBtn').addEventListener('click', () => alert("通知设置已保存！"));
			        document.getElementById('savePrivacySettingsBtn').addEventListener('click', () => alert("隐私设置已保存！"));
			
			        function handleLogin() {
			            const { usernameInput, passwordInput, messageBox, loader } = elements;
			            const username = usernameInput.value;
			            const password = passwordInput.value;
			
			            messageBox.innerHTML = '';
			            if (username.length < 3 || password.length < 6) return showMessage("用户名至少3位，密码至少6位！", "red");
			
			            loader.classList.remove('hidden');
			            setTimeout(() => {
			                if (validCredentials[username]?.password === password) {
			                    showMessage("登录成功！", "green");
			                    localStorage.setItem('isLoggedIn', 'true');
			                    localStorage.setItem('username', username);
			                    updateWelcomeInfo(username);
			                } else {
			                    showMessage("用户名或密码错误！", "red");
			                }
			                loader.classList.add('hidden');
			            }, 1000);
			        }
			
			        function handleLogout() {
			            localStorage.removeItem('isLoggedIn');
			            localStorage.removeItem('username');
			            elements.loginPage.classList.remove('hidden');
			            elements.welcomePage.classList.add('hidden');
			            resetLoginForm();
			        }
			
			        function handlePageChange(e) {
			            const targetPage = e.target.getAttribute('data-target');
			            elements.pages.forEach(page => page.classList.remove('active'));
			            document.getElementById(targetPage).classList.add('active');
			        }
			
			        function handleSettingsChange(e) {
			            const targetPage = e.target.getAttribute('data-target');
			            elements.pages.forEach(page => page.classList.remove('active'));
			            document.getElementById(targetPage).classList.add('active');
			        }
			
			        function handleNewPassword() {
			            const newPassword = document.getElementById('newPassword').value;
			            if (newPassword.length < 6) return showMessage("新密码至少6位！", "red");
			            showMessage("密码修改成功！", "green");
			            document.getElementById('newPassword').value = '';
			        }
			
			        function updateWelcomeInfo(username) {
			            elements.loginPage.classList.add('hidden');
			            elements.welcomePage.classList.remove('hidden');
			            elements.welcomeUsername.textContent = username;
			            elements.profileUsername.textContent = username;
			            elements.profileEmail.textContent = validCredentials[username].email;
			        }
			
			        function resetLoginForm() {
			            elements.usernameInput.value = '';
			            elements.passwordInput.value = '';
			            elements.messageBox.innerHTML = '';
			        }
			
			        function showMessage(message, color) {
			            elements.messageBox.textContent = message;
			            elements.messageBox.style.color = color;
			        }
		</script>
	</body>
</html>
